import React from 'react'
import cities from '../../../public/cities.json'
import { IndexBar, List } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
function Index() {
  console.log(cities)
  const navigate=useNavigate()
  return (
    <div style={{height:'100vh'}}>
    <IndexBar>
        {cities.cityList.map((group,i) => {
         
          return (
            <IndexBar.Panel
              index={group.title}
              title={group.title}
              key={i}
            >
              <List>
                {group.citys.map((item, index) => (
                  <List.Item key={index} onClick={()=>navigate('/home?city='+item.name)}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
  )
}

export default Index
